<template>
  <div class="MaterialDemand">
    <!-- banner部分开始 -->
    <div class="banner">
      <div class="w banner-text pl-10" style="margin: 0px auto">
        <h2>产品需求量</h2>
        <div class="banner-span-text clearfix">
          <div class="f-left Num-text1">
            <!-- <span>6398</span> -->
            <countTo class="num" :startVal="startVal" :endVal="endVal" :duration="1000"></countTo>
          </div>
          <div class="f-left clearfix Num-text2">
            <div class="f-left">其他待解决需求</div>
            <div class="f-left">
              <countTo class="num" :startVal="startVal" :endVal="endVal1" :duration="1000"></countTo>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- banner部分结束 -->

    <!-- main主要部分开始 -->
    <div class="main w">
      <!-- 标题模块 -->
      <div class="main-title mt-40">
        <img src="./image/tips.png" alt />
        <span>产品需求</span>
      </div>

      <!-- 搜索模块 -->
      <div class="main-search">
        <a-form-model :label-col="{span:2}" :model="form">
          <a-form-model-item label="关键字">
            <a-input placeholder="请输入需求名称" v-model="form.keyword" />
            <a-button class="ant-btn1" @click="search">搜索</a-button>
            <span @click="show=!show" v-show="!show" class="show-btn">
              高级搜索
              <a-icon type="caret-right" />
            </span>
            <span @click="show=!show" v-show="show" class="show-btn" style="color: #188af1;">
              高级搜索
              <a-icon type="caret-down" />
            </span>
          </a-form-model-item>
        </a-form-model>

        <div v-show="show">
          <div>
            <a-form-model class="mt-10" :label-col="{span:2}" :wrapper-col="{span:14}">
              <a-form-model-item label="产品类别：">
                <a-select placeholder="请选择" v-model="selectText" style="width: 250px" class="mr-32" @change="handleChange">
                  <a-select-option value=''>请选择</a-select-option>
                  <a-select-option v-for="(item,index) in selectType" :key="index" :value="item.id">{{ item.categoryName }}</a-select-option>
                </a-select>
                <a-select placeholder="请选择" v-model="selectText1" style="width: 250px" class="mr-32" @change="handleChange1">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option v-for="(item, index) in selectType1" :key="index" :value="item.categoryNo">{{ item.categoryName }}</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="发布时间">
                <a-range-picker format="YYYY-MM-DD" @change="timeSelect" />
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
      </div>

      <div class="main-searchResult clearfix">
        <div class="f-left search-left">
          <em v-if="keyword!=''">
            搜索："
            <span class="search-text1">{{keyword?keyword:'全部内容'}}</span> "，
          </em>
          共
          <span class="search-text2">{{totals}}</span> 条数据
        </div>
        <div class="f-right search-right clearfix">
          <a-button @click="changeOrderTypes('remainDays')">
            <div class="f-left search-right-icon">
              <div>
                <a-icon type="caret-up" :class="onChangeorderTypes==3?'':'down'" />
              </div>
              <div>
                <a-icon type="caret-down" :class="onChangeorderTypes==4?'':'down'" />
              </div>
            </div>
            <div class="f-left remainingTime">剩余时间</div>
          </a-button>
          <a-button @click="changeOrderTypes('createTime')">
            <div class="f-left search-right-icon">
              <div>
                <a-icon type="caret-up" :class="onChangeorderTypes==1?'':'down'" />
              </div>
              <div>
                <a-icon type="caret-down" :class="onChangeorderTypes==2?'':'down'" />
              </div>
            </div>
            <div class="f-left remainingTime">发布时间</div>
          </a-button>
        </div>
      </div>

      <div class="content-box">
        <div class="gutter-example">
          <a-row :gutter="16">
            <a-col class="gutter-row" v-for="(item, index) in MaterialsDemandList" :key="index" :span="6" @click="toDetail(item.id)">
              <div class="row-box" @mouseenter="changeActive($event)" @mouseleave="removeActive($event)">
                <div class="expire pl-20" v-if="item.remainDays < 4 && item.remainDays>=0">即将过期</div>
                <div class="expire pl-20" style="background-color: #0da9b0" v-if="item.isLongTime==1">长期有效</div>
                <!-- <div class="expire shixiao pl-20" v-if="item.remainDays<0">已失效</div> -->
                <div class="content-title">
                  <div class="content-title-text clearfix">
                    <div class="f-left"></div>
                    <div class="row-title row-ellipsis">{{item.demandProductName}}</div>
                  </div>
                </div>
                <div class="row-mainBox">
                  <ul>
                    <li class="row-ellipsis" :title="item.productOneCategoryName+'-'+item.productSecondCategoryName">
                      <span class="disc"></span>产品类别：
                      <span>{{item.productOneCategoryName}}-{{item.productSecondCategoryName}}</span>
                    </li>
                    <li class="row-ellipsis">
                      <span class="disc"></span>发布时间：
                      <span>{{item.createTime}}</span>
                    </li>
                    <li class="row-ellipsis">
                      <span class="disc"></span>剩余时间：
                      <span v-if="item.remainDays > 0 && item.isLongTime!=1 ">{{ item.remainDays }}天</span>
                      <span v-else-if="item.remainDays == 0 && item.isLongTime!=1">今天</span>
                      <!-- <span v-else-if="item.remainDays < 0">已失效</span> -->
                      <span v-if="item.isLongTime==1" style="color: #0da9b0">长期有效</span>
                      <!-- <span v-if="item.remainDays>0 && item.isLongTime !=1">{{item.remainDays}}天</span>
                      <span v-else-if="item.remainDays==0">今天</span>
                      <span v-else-if="item.remainDays<0 && item.isLongTime !=1">已失效</span>
                      <span v-if="item.isLongTime == 1" style="color: #0da9b0">长期有效</span> -->
                    </li>
                    <li class="row-ellipsis">
                      <span class="disc"></span>需求型号：
                      <span>{{item.productSpec}}</span>
                    </li>
                  </ul>
                </div>
                <div class="clearfix row-footer">
                  <div class="f-left row-footer-text">
                    <span class="disc"></span>{{item.entName}}
                  </div>
                  <!-- <icon-font
                    class="f-right right-icon"
                    type="icon-gengduojiantou"
                  />-->
                  <i class="iconfont right-icon icon-gengduojiantou f-right"></i>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <no-data v-if="MaterialsDemandList.length<=0" :Keywords="seachKeyword"></no-data>
      <div style="text-align:center" class="mt-20 mb-100">
        <a-pagination :show-total="total => `共有 ${total} 条数据`" show-quick-jumper :default-current="current" show-size-changer :defaultPageSize='PageSize' :pageSizeOptions="['12', '16', '20', '24']" :PageSize="PageSize" :total="totals" @change="onChange" @showSizeChange="showSizeChange" />
      </div>
    </div>
    <!-- main主要部分结束 -->
  </div>
</template>

<script>
import NoData from "@/components/Nodata";
import request from "@/utils/request";
import { Icon } from "ant-design-vue";
import countTo from "vue-count-to";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2056587_p20u0u8ro2d.js",
});
import {
  GetSearchPageList,
  GetByParent,
  getMaterialMicroStatistics,
} from "@/apis/MaterialsDemand";
export default {
  data() {
    return {
      PageSize: 12,
      current: 1,
      selectText: "请选择",
      selectText1: "请选择",
      seachKeyword: "",
      seachKeyword1: "",
      keywordFirstID: "",
      productSecondCategory: "",
      categoryName: "",
      onChangeorderTypes: 7, //首页排序类型  1发布时间倒叙 2发布时间正序 剩余时间 3 倒叙 剩余时间 4 正序
      form: { keyword: "" },
      keyword: "",
      keywords: "",
      totals: 0,
      MaterialsDemandList: [],
      startVal: 0,
      endVal: 6398,
      endVal1: 85,
      show: false,
      selectType: [],
      selectType1: [],
      createTimeFrom: '',
      createTimeTo: ''
    };
  },
  methods: {
    timeSelect(date, dateStr) {
      this.createTimeFrom = dateStr[0]
      this.createTimeTo = dateStr[1]
    },
    changeActive($event) {
      $event.currentTarget.className = "boxShowdow row-box";
    },
    removeActive($event) {
      $event.currentTarget.className = "row-box";
    },
    toDetail(id) {
      // this.$router.push('/MaterialDetails');
      this.$router.push({
        path: "/MaterialDetails",
        query: { id },
      });
    },
    // 搜索
    search() {
      this.current = 1;

      let _searchdemandKeyWords = localStorage.getItem("searchdemandKeyWords");
      let searchdemandKeyWords = [];
      if (_searchdemandKeyWords) {
        // 获取本地产品 关键字记录
        searchdemandKeyWords = JSON.parse(_searchdemandKeyWords);
        if (this.form.keyword != "") {
          // if (searchdemandKeyWords.length >= 5) {
          //   searchdemandKeyWords.shift();
          // }
          // searchdemandKeyWords.push(this.form.keyword);
          if (searchdemandKeyWords.includes(this.form.keyword)) {
          } else {
            if (searchdemandKeyWords.length >= 5) {
              searchdemandKeyWords.shift();
              searchdemandKeyWords.push(this.form.keyword);
            } else {
              searchdemandKeyWords.push(this.form.keyword);
            }
          }
        }
      }

      localStorage.setItem(
        "searchdemandKeyWords",
        JSON.stringify(searchdemandKeyWords)
      );
      this.keyword = this.form.keyword;
      this.getList(
        this.form.keyword,
        this.keywordFirstID,
        this.productSecondCategory
      );
      if (this.keywordFirstID == "") {
        this.seachKeyword = this.form.keyword;
      } else if (this.productSecondCategory == "") {
        this.seachKeyword =
          (this.keywords ? this.keywords : "") + " " + this.seachKeyword1;
      } else {
        this.seachKeyword =
          (this.form.keyword ? this.form.keyword : "") +
          " " +
          this.seachKeyword1 +
          "：" +
          this.categoryName;
      }
    },
    // 分页搜索
    onChange(page) {
      this.current = page;
      this.getList(
        this.form.keyword,
        this.keywordFirstID,
        this.productSecondCategory
      );
    },
    // 页容量的改变事件
    showSizeChange(current, size) {
      this.PageSize = size;
      this.current = current;
      this.getList();
    },
    getList(keyword, productOneCategory, productSecondCategory) {
      let params = {
        current: this.current,
        size: this.PageSize,
        orderTypes: this.onChangeorderTypes,
        showNotExpired: 1,
        auditStatus: 2,
        demandStatus: 2,
        keyword,
        productOneCategory,
        productSecondCategory,
        createTimeFrom: this.createTimeFrom,
        createTimeTo: this.createTimeTo
      };
      // console.log(params);
      GetSearchPageList(params)
        .then((res) => {
          this.keywords = params.keyword;
          this.totals = res.data.total;
          // console.log(res);
          if (res.code == 200) {
            this.MaterialsDemandList = res.data.records;

            // this.endVal = res.data.total
            // console.log(this.MaterialsDemandList)
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 产品分类下拉列表
    GetByParentList() {
      GetByParent().then((res) => {
        if (res.code == 200) {
          this.selectType = res.data.filter(ele => ele.categoryStatus === 1);
        }
      });
    },
    // 一级分类搜索
    handleChange(value) {
      console.log("value");
      console.log(value);
      this.selectType.map((item, index) => {
        if (item.id == value) {
          this.seachKeyword1 = item.categoryName.trim();
          this.keywordFirstID = item.categoryNo;
          this.seachKeyword =
            (this.keywords ? this.keywords : "") + " " + this.seachKeyword1;
        }
      });

      let _searchdenandCategory1List = localStorage.getItem(
        "searchdenandCategory1List"
      );
      let searchdenandCategory1List = [];
      if (_searchdenandCategory1List) {
        // 获取本地产品 关键字记录
        searchdenandCategory1List = JSON.parse(_searchdenandCategory1List);
        if (searchdenandCategory1List.length >= 5) {
          searchdenandCategory1List.shift();
        }
        searchdenandCategory1List.push(this.keywordFirstID);
      } else {
        searchdenandCategory1List.push(this.keywordFirstID);
      }

      localStorage.setItem(
        "searchdenandCategory1List",
        JSON.stringify(searchdenandCategory1List)
      );

      if (value == "") {
        this.selectText1 = "";
        this.keywordFirstID = "";
        this.productSecondCategory = "";
        this.selectType1 = {};
        // this.seachKeyword = "";
        // this.getList();
      } else {
        this.selectText1 = "";
        let params = { pid: value };
        // console.log(params)
        GetByParent(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.selectType1 = res.data.filter(ele => ele.categoryStatus === 1);
            // this.getList(this.form.keyword, this.keywordFirstID);
          }
        });
      }
    },
    // 二级分类搜索
    handleChange1(value) {
      this.productSecondCategory = value;
      this.selectType1.map((item, index) => {
        if (item.categoryNo == this.productSecondCategory) {
          this.categoryName = item.categoryName.trim();
          this.seachKeyword =
            (this.keywords ? this.keywords : "") +
            " " +
            this.seachKeyword1 +
            "：" +
            this.categoryName;
        }
      });

      console.log(this.productSecondCategory);

      let _searchdenandCategory2List = localStorage.getItem(
        "searchdenandCategory2List"
      );
      let searchdenandCategory2List = [];
      if (_searchdenandCategory2List) {
        // 获取本地产品 关键字记录
        searchdenandCategory2List = JSON.parse(_searchdenandCategory2List);
        if (searchdenandCategory2List.length >= 5) {
          searchdenandCategory2List.shift();
        }
        searchdenandCategory2List.push(this.productSecondCategory);
      } else {
        searchdenandCategory2List.push(this.productSecondCategory);
      }

      localStorage.setItem(
        "searchdenandCategory2List",
        JSON.stringify(searchdenandCategory2List)
      );
      // this.getList(
      //   this.form.keyword,
      //   this.keywordFirstID,
      //   this.productSecondCategory
      // );
    },
    // 升降序
    //剩余时间排序
    changeOrderTypes(t) {
      console.log(t);
      if (t == "remainDays") {
        if (this.onChangeorderTypes == 4) {
          this.onChangeorderTypes = 3;
        } else {
          this.onChangeorderTypes = 4;
        }
      }
      if (t == "createTime") {
        if (this.onChangeorderTypes == 2) {
          this.onChangeorderTypes = 1;
        } else {
          this.onChangeorderTypes = 2;
        }
      }
      console.log("=========orderTypes========");
      console.log(this.onChangeorderTypes);
      // this.getList(this.form.keyword);
      this.getList(
        this.form.keyword,
        this.keywordFirstID,
        this.productSecondCategory
      );
    },

    //导航统计
    getMaterialMicroStatistics() {
      let params = {
        auditStatus: 2,
      };
      getMaterialMicroStatistics(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.endVal = res.data.totalCount;
          this.endVal1 = res.data.notResolveCount;
        }
      });
    },
  },
  created() {
    let _category_1 = this.$route.query.category_1; //编号
    let _category_1_id = this.$route.query.category_1_id; //ID
    // let _keywords = this.$route.query.keywords;
    if (_category_1) {
      this.selectText = _category_1_id;
      this.keywordFirstID = _category_1;

      let params = { pid: _category_1_id };
      // console.log(params)
      GetByParent(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.selectType1 = res.data.filter(ele => ele.categoryStatus === 1);
        }
      });
      this.getList("", _category_1);
      let _searchdenandCategory1List = localStorage.getItem(
        "searchdenandCategory1List"
      );
      let searchdenandCategory1List = [];
      if (_searchdenandCategory1List) {
        // 获取本地产品 关键字记录
        searchdenandCategory1List = JSON.parse(_searchdenandCategory1List);
        if (searchdenandCategory1List.length >= 5) {
          searchdenandCategory1List.shift();
        }
        searchdenandCategory1List.push(this.keywordFirstID);
      } else {
        searchdenandCategory1List.push(this.keywordFirstID);
      }

      localStorage.setItem(
        "searchdenandCategory1List",
        JSON.stringify(searchdenandCategory1List)
      );
    }

    let _keywords = this.$route.query.keywords;
    if (_keywords) {
      this.form.keyword = this.$route.query.keywords;
      let _searchdemandKeyWords = localStorage.getItem("searchdemandKeyWords");
      let searchdemandKeyWords = [];
      if (_searchdemandKeyWords) {
        // 获取本地产品 关键字记录
        searchdemandKeyWords = JSON.parse(_searchdemandKeyWords);
        if (searchdemandKeyWords.includes(_keywords)) {
        } else {
          if (searchdemandKeyWords.length >= 5) {
            searchdemandKeyWords.shift();
            searchdemandKeyWords.push(_keywords);
          } else {
            searchdemandKeyWords.push(_keywords);
          }
        }
      }

      localStorage.setItem(
        "searchdemandKeyWords",
        JSON.stringify(searchdemandKeyWords)
      );
      this.getList(this.form.keyword);
    }
    if ((_keywords == undefined ||_keywords == '') && _category_1 == undefined) {
      this.getList(this.form.keyword);
    }
    // ;
    this.GetByParentList();
    this.getMaterialMicroStatistics();
  },
  watch:{
    $route(to,from){
      console.log(to);//到哪去
      this.keyword = to.query.keywords
      this.form.keyword = to.query.keywords
      this.getList(this.form.keyword)
      
    }
  },
  components: {
    IconFont,
    countTo,
    NoData,
  },
};
</script>

<style lang="less" scoped>
// ::v-deep .ant-pagination-item-link,
// ::v-deep .ant-pagination-item{
//   background-color: #f0f2f5;
//   color: #606266;
//   border: 0;
// }
.gutter-example > .ant-row > div {
  background: transparent;
  border: 0;
}
.w {
  width: 1200px;
  margin: 0px auto;
}
.disc {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: @color-188;
  display: inline-block;
  margin-right: 8px;
}
.MaterialDemand {
  box-sizing: border-box;
  .banner {
    height: 200px;
    background-image: url(./image/banner.png);
    background-size: 100% 100%;

    .banner-text {
      h2 {
        padding: 57px 0 0px;
        font-size: @font36;
        font-weight: 400;
        color: @text-color-606;
        font-family: Source Han Sans CN;
        line-height: 1;
      }
      .banner-span-text {
        margin-top: 22px;

        .Num-text1 {
          span {
            font-family: Arial;
            font-size: 51px;
            color: #072947;
            line-height: 1;
            margin-right: 28px;
          }
        }

        .Num-text2 {
          width: 336px;
          height: 50px;
          line-height: 50px;
          border: 0;
          background: linear-gradient(
            to left,
            rgba(187, 223, 255, 0) 25%,
            rgba(24, 138, 241, 0.5)
          );

          div {
            font-weight: normal;
            &:nth-child(1) {
              margin: 12px 17px 8px 28px;
              height: 30px;
              line-height: 30px;
              font-size: 23px;
              color: #2a51bc;
            }

            &:nth-child(2) {
              margin-top: 6px;
              height: 43px;
              width: 43px;
              line-height: 43px;
              font-family: Arial;
              font-size: 39px;
              color: #2a51bc;
            }
          }
        }
      }
    }
  }

  .main {
    .main-title {
      img {
        width: 40px;
        height: 40px;
        margin-right: 16px;
        vertical-align: middle;
        margin-top: -10px;
      }

      span {
        font-family: Microsoft YaHei;
        font-size: @font26;
        line-height: @font26;
        font-weight: 700;
        color: @text-color-303;
      }
    }

    .main-search {
      margin-top: 24px;
      margin-bottom: 24px;

      ::v-deep .ant-col-2 {
        width: auto !important;
      }

      &:nth-child(1) {
        font-family: Microsoft YaHei;
        font-size: @font14;
        font-weight: normal;
        line-height: 19px;
        color: @text-color-606;
        margin-right: 8px;
      }

      .ant-input {
        width: 500px;
        height: 40px;
      }

      .ant-btn1 {
        margin-left: 12px;
        margin-right: 40px;
        width: 100px;
        height: 40px;
        background-color: #2a51bc;
        box-shadow: 0px 10px 20px 0px rgba(7, 41, 71, 0.16);
        border-radius: 4px;
        color: #fff;
      }

      .show-btn {
        cursor: pointer;

        &:hover {
          color: #188af1;
        }
      }

      &:nth-child(4) {
        font-family: Microsoft YaHei;
        font-size: @font16;
        font-weight: normal;
        line-height: 21px;
        color: @text-color-606;
      }
    }

    .show-box {
      padding: 16px 20px;
      border-radius: 4px;
      border: solid 1px #e4e7ed;
      margin-bottom: 32px;
    }

    .main-searchResult {
      height: 70px;
      line-height: 70px;
      background-color: #fff;
      box-shadow: 0px 3px 10px 0px rgba(24, 138, 241, 0.16);
      border-radius: 4px;
      margin-bottom: 32px;

      .search-left {
        margin-left: 26px;
        font-size: @font16;

        .search-text1 {
          color: #2a51bc;
        }

        .search-text2 {
          color: #e9284f;
          font-weight: 700;
        }
      }

      .search-right {
        margin-right: 24px;

        .ant-btn {
          margin-left: 16px;
          width: 120px;
          height: 40px;
          line-height: 1;
          border: solid 1px #188af1;
          color: #188af1;
          font-size: @font16;

          &:hover {
            background-color: #188af1;
            color: #fff;
          }
        }

        .down {
          opacity: 0.5;
        }

        .remainingTime {
          padding-left: 5px;
          line-height: 32px;
        }
        .search-right-icon {
          div {
            width: 14px;
            height: 9px;
          }
          padding-top: 3px;
        }
      }
    }

    .content-box {
      .row-box {
        padding: 16px;
        border: solid 1px #e4e7ed;
        position: relative;
        overflow: hidden;
        margin-bottom: 24px;
        // height: 238px;
        cursor: pointer;

        .expire {
          width: 80px;
          height: 80px;
          line-height: 135px;
          text-align: center;
          position: absolute;
          top: -55px;
          right: 0;
          font-size: 12px;
          color: #fff;
          background-color: #e9284f;
          border-bottom-left-radius: 40%;
        }

        .shixiao {
          background-color: #ccc;
        }

        .content-title {
          margin-top: 8px;
          padding-bottom: 14px;

          .content-title-text {
            div {
              &:nth-child(1) {
                margin-top: 6px;
                margin-right: 9px;
                width: 6px;
                height: 16px;
                background-color: @color-188;
                border-radius: 2px;
              }

              &:nth-child(2) {
                font-size: @font18;
                color: @text-color-303;
              }
            }
          }
        }

        .row-mainBox {
          padding: 15px 0;
          border-top: 1px dashed #e4e7ed;
          border-bottom: 1px dashed #e4e7ed;
          ul {
            li {
              font-size: @font14;
              font-family: Microsoft YaHei;
              line-height: 24px;
              font-weight: normal;
              color: @text-color-909;
            }
          }
        }

        .row-footer {
          margin: 16px 0 0;

          .row-footer-text {
            width: 90%;
            font-family: Microsoft YaHei;
            font-size: @font14;
            font-weight: normal;
            color: @text-color-606;
          }

          .right-icon {
            width: 18px;
            height: 18px;
            line-height: 24px;
            color: #909399;
          }
        }

        &:hover {
          // border: 0 none;
          .content-title {
            .content-title-text {
              .row-title {
                color: #188af1;
                // font-weight: 700;
              }
            }
          }
          .row-footer {
            .right-icon {
              color: #188af1;
            }
          }
        }
      }
    }
  }
}
.boxShowdow {
  box-shadow: 6px 6px 20px 0px rgba(24, 138, 241, 0.16);
}
</style>>